import React, { useMemo, useState } from 'react';
import { Badge, Card, Collapse, Divider, Space, Tag, Tooltip } from 'antd';
import dayjs from 'dayjs';
import * as c from '@/services/consts';
import * as utils from '@/utils/utils';
import { AreaChartOutlined, ArrowRightOutlined, FieldTimeOutlined, FundFilled, InfoCircleFilled, InfoCircleOutlined, OrderedListOutlined, UserOutlined } from '@ant-design/icons';

export type StatusTagProps = {
  log: API.ServerInfoChangeIpLogItem | undefined;
  lastLog: API.ServerInfoChangeIpLogItem | undefined;
};

export const StatusTag: React.FC<StatusTagProps> = (props) => {
  const { log, lastLog } = props;

  const getLogs = (logs?: API.ServerInfoChangeIpLogItem[]) => {
    return logs?.map((val) =>{ return (
      <div><b>时间</b> {utils.formatDate(val.begin)} <ArrowRightOutlined /> {utils.formatDate(val.end, 'MM-DD HH:mm:ss')} 　 
      {val?.old} <ArrowRightOutlined /> {val.blocked == true ? <Tag color='error'>{val?.new}</Tag> : val?.new}</div>
    )});
  }

  let m_logText : string|undefined = undefined;
  

  const renderTag = useMemo(() => {
    let logFrom = log?.from == 'auto' ? <FieldTimeOutlined /> : <UserOutlined />;
    let logTimesBadge = log?.times > 1 ? (<Badge count={log?.times} style={{marginLeft: 2,backgroundColor: '#faad14',}}/>) : ('');
    return (<>
          {log?.status ? (
            <div>
              <Tooltip
                color="#666" overlayStyle={{minWidth:300, maxWidth: 900}}
                title={
                  <>

                    {lastLog?.begin ? <>
                    <div>上次更换</div>
                    <div>
                      <Tag color={lastLog?.status == 2 ? 'success': 'error'}>{c.getObjectText(c.ChangeIpStatusOptions, lastLog?.status)}</Tag>                    
                      <Tooltip
                        color="#666" overlayStyle={{minWidth:300, maxWidth: 900}}
                        destroyTooltipOnHide={true}
                        onOpenChange={()=>{m_logText = undefined;}}
                        title={lastLog?.logs?.length > 0 ? <div id='lastLogHistory' onMouseUp={(e) =>{
                          if(!m_logText){
                            m_logText = document.getElementById('lastLogHistory').innerHTML;
                          }
                          document.getElementById('lastLogHistory').innerHTML = utils.highlight(m_logText, window.getSelection().toString());
                        }} style={{maxWidth:900, maxHeight:600, overflow:'auto'}}>
                        {getLogs(lastLog.logs)}
                        </div> : ''}>
                        <Tag color='cyan'>{lastLog?.times} 次
                          {lastLog?.logs?.length > 0 ? <AreaChartOutlined style={{fontSize:14, marginLeft:5, color:'#108ee9'}}/> : ''}
                        </Tag>
                      </Tooltip>
                      {lastLog?.from == 'auto' ? <Tag color='orange'>自动</Tag> : <><Tag color='blue'>人工</Tag><UserOutlined /> {lastLog?.user}</>}
                    </div>
                    <div>下发：{utils.formatDate(lastLog?.begin)}</div>
                    <div>完成：{utils.formatDate(lastLog?.end)}</div>
                    <div>更换：{lastLog?.old} <ArrowRightOutlined /> {lastLog?.blocked == true ? <Tag color='error'>{lastLog?.new ?? '--'}</Tag> : lastLog?.new}</div>
                    </> : ''}


                    <div style={{marginTop:20}}>本次更换</div>
                    <div>
                      <Tag color={log?.status == 2 ? 'success': 'error'}>{c.getObjectText(c.ChangeIpStatusOptions, log?.status)}</Tag>
                      <Tooltip
                        color="#666" overlayStyle={{minWidth:300, maxWidth: 900}}
                        destroyTooltipOnHide={true}
                        onOpenChange={()=>{m_logText = undefined;}}
                        title={log?.logs?.length > 0 ? <div id='logHistory' onMouseUp={(e) =>{                          
                          if(!m_logText){
                            m_logText = document.getElementById('logHistory').innerHTML;
                          }
                          document.getElementById('logHistory').innerHTML = utils.highlight(m_logText, window.getSelection().toString());
                        }} style={{maxWidth:900, maxHeight:600, overflow:'auto'}}>
                          {getLogs(log.logs)}
                        </div> : ''}>
                        <Tag color='cyan'>{log?.times} 次
                          {log?.logs?.length > 0 ? <AreaChartOutlined style={{fontSize:14, marginLeft:5, color:'#108ee9'}}/> : ''}
                        </Tag>
                      </Tooltip>
                      {log?.from == 'auto' ? <Tag color='orange'>自动</Tag> : <><Tag color='blue'>人工</Tag><UserOutlined /> {log?.user}</>}
                    </div>
                    <div>下发：{utils.formatDate(log?.begin)}</div>
                    <div>完成：{utils.formatDate(log?.end)}</div>
                    <div>更换：{log?.old} <ArrowRightOutlined /> {log?.blocked == true ? <Tag color='error'>{log?.new}</Tag> : log?.new}</div>

                  </>
                }
              >
                {log?.status == c.ChangeIpStatus.更换中.value ? 
                  (<Tag color="blue">{logFrom}更换中/{' '}{utils.formatDate(log?.begin,'MM-DD HH:mm:ss',)}</Tag>) : 
                  log?.status == c.ChangeIpStatus.重新更换.value ? 
                  (<Tag color="orange">{logFrom}黑名单 重新更换中 /{' '}{utils.formatDate(log.begin,'MM-DD HH:mm:ss',)}</Tag>) : 
                  log?.status == c.ChangeIpStatus.失败.value ? 
                  (<Tag color="error">{logFrom}更换失败 /{' '}{utils.formatDate(log?.end,'MM-DD HH:mm:ss',)}
                  {logTimesBadge}
                  </Tag>) : 
                  log?.blocked == true ? (<Tag color="orange">{logFrom}黑名单 /{' '}{utils.formatDate(log?.end,'MM-DD HH:mm:ss',)}{logTimesBadge}</Tag>) : 
                  (<>
                    <div>
                      <Tag color={dayjs(new Date()).format('YYYY-MM-DD') != dayjs(log?.end).format('YYYY-MM-DD',)? '': 'success'}>
                        {logFrom}老 {log?.old} /{' '}{utils.formatDate(log?.end, 'MM-DD HH:mm:ss',)}
                        {logTimesBadge}
                      </Tag>
                    </div>
                  </>)
                }
              </Tooltip>
            </div>

          ) : ('')}
    </>);
  }, [log, lastLog]);

  // const renderTag = useMemo(() => {
  //     return (<>
  //           {log?.status ? (
  //             <div>
  //               <Tooltip
  //                 color="grey"
  //                 title={
  //                   <>
  //                     <div>状态：{<Tag color={log?.status == 2 ? 'success': 'error'}>
  //                             {c.getObjectText(c.ChangeIpStatusOptions, log?.status)}
  //                           </Tag>}
  //                           {log?.blocked == true ? <Tag color="orange">黑名单IP</Tag>:''}
  //                     </div>
  //                     <div>下发人员：{log?.user}</div>
  //                     <div>下发时间：{utils.formatDate(log?.begin)}</div>
  //                     <div>完成时间：{utils.formatDate(log?.end)}</div>
  //                     <div>下发次数：{log?.times}
  //                     {/* {log.logs?.length > 0 ? <Tooltip></Tooltip>
  //                     : log?.times} */}
  //                     </div>

  //                     {lastLog?.begin ? <>
  //                     <div>上次状态：{<Tag color={lastLog?.status == 2 ? 'success': 'error'}>
  //                             {c.getObjectText(c.ChangeIpStatusOptions, lastLog?.status)}
  //                           </Tag>}
  //                           {lastLog?.blocked == true ? <Tag color="orange">黑名单IP</Tag>:''}
  //                     </div>
  //                     <div>上次下发人员：{lastLog?.user}</div>
  //                     <div>上次下发时间：{utils.formatDate(lastLog?.begin)}</div>
  //                     <div>上次完成时间：{utils.formatDate(lastLog?.end)}</div>
  //                     <div>上次下发次数：{lastLog?.times}</div>
  //                     </> : ''}

  //                   </>
  //                 }
  //               >
  //                 {log?.status == c.ChangeIpStatus.更换中.value ? 
  //                   (<Tag color="blue">IP更换中 /{' '}{utils.formatDate(log?.begin,'MM-DD HH:mm:ss',)}</Tag>) : 
  //                   log?.status == c.ChangeIpStatus.重新更换.value ? 
  //                   (<Tag color="orange">黑名单IP 重新更换中 /{' '}{utils.formatDate(log.begin,'MM-DD HH:mm:ss',)}
  //                   {log?.times > 1 ? (<Badge count={log?.times} style={{marginLeft: 2,backgroundColor: '#faad14',}}/>) : ('')}
  //                   </Tag>) : 
  //                   log?.status == c.ChangeIpStatus.失败.value ? 
  //                   (<Tag color="error">更换失败 /{' '}{utils.formatDate(log?.end,'MM-DD HH:mm:ss',)}
  //                   {log?.times > 1 ? (<Badge count={log?.times} style={{marginLeft: 2,backgroundColor: '#faad14',}}/>) : ('')}
  //                   </Tag>) : 
  //                   log?.blocked == true ? (<Tag color="orange">黑名单IP /{' '}{utils.formatDate(log?.end,'MM-DD HH:mm:ss',)}</Tag>) : 
  //                   (<>
  //                     <div>
  //                       <Tag color={dayjs(new Date()).format('YYYY-MM-DD') != dayjs(log?.end).format('YYYY-MM-DD',)? '': 'success'}>
  //                         老: {log?.old} /{' '}{utils.formatDate(log?.end, 'MM-DD HH:mm:ss',)}
  //                         {log?.times > 1 ? (<Badge count={log?.times} style={{marginLeft: 2,backgroundColor: '#faad14',}}/>) : ('')}
  //                       </Tag>
  //                     </div>
  //                   </>)
  //                 }
  //               </Tooltip>
  //             </div>

  //           ) : ('')}
  //     </>);
  // }, [log, lastLog]);

  return <>{renderTag}</>;
};


export default StatusTag;
